<script type="text/javascript" src="<?= base_url() ?>scripts/canvasser.js"></script>		
<br />
<div style="float:left;">
	<div class="content_box left">
		<header>
			<div class="label">
				<img src="<?= base_url() ?>images/icons/information.png" alt=""><div>Requisition #<?= $requisition->rr_number ?></div>		
			</div>	
		</header>
		<section>
			<form>
				<table>
					<tr>
						<td>
							Requestor:
						</td>
						<td>
							<?= $requisition->requestor->name ?>
						</td>
					</tr>
					<tr>
						<td>
							Date Requested:
						</td>
						<td>
							<?= $requisition->request_date ?>
						</td>
					</tr>	
					<tr>
						<td>
							Materials:
						</td>
						<td>
							<?= count($requisition->materials) ?>
						</td>
					</tr>	
					<tr>
						<td>
							Approved by:
						</td>
						<td>
							<?= $requisition->approver->name ?>
						</td>
					</tr>						
				</table>
			</form>
			<div style="padding:5px 5px 5px; float:right;">
				<a id="new_user_button" href="#new-user-popup" class="btn"><span class="icon icon-ok"></span>Submit</a>
				<a id="new_user_button" href="#new-user-popup" class="btn"><span class="icon icon-disk"></span>Save Draft</a>
			</div>
		</section>
	</div>
	<div style="clear:both; height:10px;"></div>
	<div class="content_box left">
		<header>
			<div class="label">
				<img src="<?= base_url() ?>images/icons/information.png" alt=""><div>Materials</div>		
			</div>	
		</header>
		<section>
			<ul>
			<? foreach($requisition->materials as $material): ?>
				<li class="material_<?= $material->id ?>" draggable="true">
					<?= $material->quantity . " " . $material->unit . " " . $material->name ?>
					<input type="hidden" id="material_<?= $material->id ?>" value='<?= json_encode($material) ?>' />
				</li>
			<? endforeach; ?>
			</ul>
		</section>
	</div>
</div>
<div id="suppliers_box" style="float:left;">
	<a class="btn" href="javascript:add_supplier()"><span class="icon icon-add"></span>Add Supplier</a>
	<div class="supplier_box" style="display:none;">
		<div class="content_box right" style="margin-top:10px;">
			<header>
				<div class="label">
					<img src="<?= base_url() ?>images/icons/information.png" alt=""><div>Supplier</div>		
				</div>	
				<div class="actions">
					<a class="remove_button btn" title="close"><span class="icon icon-cancel"></span>Remove</a>
				</div>							
			</header>
			<section>
				<div style="padding:10px; border-bottom:dotted 1px #999;">
					Supplier:
					<select>
						<option>National Bookstore</option>
						<option>International Bookstore</option>
						<option>Local Bookstore</option>
					</select>		
					<a href="#">View Contact Details</a>
				</div>
				<form>
					<table>
						<tr>
							<th style="width:10%;">Type</th>
							<th style="width:10%;">Code</th>
							<th style="width:40%;">Material</th>
							<th style="width:10%;">Qty</th>
							<th style="width:10%;">Unit</th>
							<th style="width:10%;">Unit Price</th>
							<th style="width:10%;">Total</th>
						</tr>
					</table>
				</form>
			</section>
		</div>
	</div>
</div>